<template>
  <div class="login">
    <!--登录 -->
    <van-sticky>
      <nav-bar is-back>
        <template #center>
          <span>登录</span>
        </template>
      </nav-bar>
    </van-sticky>
    <div class="form">
      <van-form label-align="center" validate-first @submit="loginAction">
        <!-- logo -->
        <img src="@/assets/img/logo.png" width="100%" />
        <!-- 手机号 -->
        <van-field
          type="tel"
          v-model="formData.phone"
          label="手机号"
          placeholder="手机号"
          :rules="[phonePattern]"
          name="phone"
        />
        <!-- 密码 -->
        <van-field
          label="密码"
          placeholder="密码"
          v-model="formData.password"
          :rules="[passwordPattern]"
          type="password"
          name="password"
        />
        <!-- 登录 -->
        <van-button
          block
          color="var(--theme-color)"
          round
          size="small"
          style="margin-top: 30px"
        >
          登录
        </van-button>
        <!-- 去注册 -->
        <div class="signup" @click="$router.push('/register')">
          没有帐号？去注册
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { phonePattern, passwordPattern } from '@/utils'
import NavBar from '../../components/nav-bar/nav-bar.vue'
export default {
  components: {
    NavBar
  },
  data: () => ({
    formData: {
      // 表单数据
      phone: '',
      password: ''
    },
    phonePattern,
    passwordPattern
  }),
  methods: {
    // 登录
    ...mapActions(['loginAction'])
  }
}
</script>

<style lang="less" scoped>
.login {
  background: white;
}
.form {
  width: 95%;
  height: calc(100vh - 44px);
  padding-top: 50px;
  // display: flex;
  // align-items: center;
  margin: 0 auto;
}
// 样式穿透
/deep/ input::placeholder {
  font-size: 9px;
}
.signup {
  font-size: 12px;
  text-align: center;
  line-height: 30px;
  margin-top: 20px;
}
</style>
